<!-- 装修图文组件：图片轮播 -->
<template>
	<su-swiper :list="imgList" :dotStyle="data.indicator === 'dot' ? 'long' : 'tag'" imageMode="scaleToFill"
		dotCur="bg-mask-40" :seizeHeight="300" :autoplay="data.autoplay" :interval="data.interval * 1000"
		:mode="data.type" />
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import sheep from '@/sheep';
	import BannerApi from '@/sheep/api/promotion/banner';


	// 轮播图
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({}),
		},
		styles: {
			type: Object,
			default: () => ({}),
		},
	});
	const imgList = ref([]);

	async function fetchImgList() {
		const response = await BannerApi.getBannerListByPosition(1); // 调用接口并传入位置参数
		if (response.code === 0) {
			imgList.value = response.data.map((item) => {
				const src = item.picUrl;
				return {
					...item,
					type: 'image', // 根据你的数据结构，这里应该都是图片类型，可根据实际情况调整
					src: sheep.$url.cdn(src),
					poster: sheep.$url.cdn(item.picUrl),
				};
			});
		} else {
			console.error('获取图片列表失败');
		}
	}
	fetchImgList();

	// const imgList = computed(() =>
	// 	props.data.items.map((item) => {
	// 		const src = item.type === 'img' ? item.imgUrl : item.videoUrl;
	// 		return {
	// 			...item,
	// 			type: item.type === 'img' ? 'image' : 'video',
	// 			src: sheep.$url.cdn(src),
	// 			poster: sheep.$url.cdn(item.imgUrl),
	// 		};
	// 	}),
	// );
</script>

<style></style>